<template>
	<view class="page box">
		<comHead :datas="datasObj">
			<template #headerContent>
				<!--tab栏  -->
				<view class="tabBar flex pd-30" style="height: 132rpx;">
					<view class="item ft c-66 flex-center mr-20 bd-r20" :class="{ active: selectId === index }"
						v-for="(item, index) in tableList" :key="index" @click="selectBtn(index, item)">{{ item.name }}
					</view>
				</view>
			</template>
		</comHead>

		<!-- 列表 -->
		<view class="listBox">
			<view class="list_model bd-r40" :class="{ 'mt-20': index > 0 }" v-for="(item, index) in orderList"
				:key='item.id'>
				<view class="time flex-bwt pd-tb-20">
					<text class="c-99 ft-22">{{ item.created_at }}</text>
					<view class="status ft-24 fw-800 flex" :class="{ ing: item.order_status == '处理中' }">
						<image class="icon_samll mr-4"
							:src="`https://cdn.oss.bon-top.cn/static_bc/images/blue_time.png`" mode="aspectFill"
							v-if="item.status == '处理中'"></image>
						<image class="icon_samll mr-4"
							:src="`https://cdn.oss.bon-top.cn/static_bc/images/succeed_time.png`" mode="aspectFill"
							v-else></image>
						{{ item.status }}
					</view>
				</view>
				<view class="content">
					<view class="top">
						<image class="imgs bd-r40" :src="item.order_info.cover" mode="aspectFill"
							v-if="item.order_info.type == 1 || item.order_info.type == 3">
						</image>
						<view class="avtor flex-center" v-else>
							<image class="img" :src="item.order_info.cover" mode="aspectFill"></image>
						</view>

						<view class="right_box ml-20 te-wid mt-20 c-33">
							<view class="title te-1 ft-32 fw-800">
								{{ item.order_info.title }}
							</view>
							<view class="c-99 te-1 ft-24 mt-10" v-if="item.order_info.goods_name">
								{{ item.order_info.goods_name }}
							</view>
							<view class="money_text ft-20 fw-800 mt-10">
								{{ '￥' }}
								<span class="ft-36 ft-num3 fw-900">{{ item.order_info.total_price }}</span>
								{{ '元' }}
							</view>
						</view>
					</view>


					<!-- 售后状态 -->
					<view class="bottom refund flex-bwt bd-r20 mt-20"
						@click.stop="goPage('/subpackage/refund/refundDetail?id=' + item.id)">
						<view class="outTime ft-24 c-33 ">
							<span class="fw-800">{{ '售后状态：' }}</span>
							<span class="fw-400">{{ item.status_txt }}</span>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
				</view>
				<view class="bottom_model mt-20">

					<view class="btn_model">
						<!-- 取消 -->
						<view class="btn" v-if="item.status == '已结束'" @click="changeOrder('delete', item.id)">
							{{ '删除' }}
						</view>
						<view class="btn" v-if="item.status == '已结束'"
							@click="goPage('/subpackage/refund/refundDestination?id=' + item.id)">
							{{ '退款去向' }}
						</view>
						<!-- 申请售后 -->
						<view class="btn noPay" v-if="item.status !== '已结束'" @click="changeOrder('cancel', item.id)">
							{{ '撤销售后' }}
						</view>

						<!-- 售后 -->
						<view class="btn pay" v-if="item.status == '已结束'"
							@click.stop="goPage('/subpackage/refund/refundDetail?id=' + item.id)">
							{{ '售后详情' }}
						</view>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="orderList.length == 0">暂无数据</view>
		</view>
		<!-- <dialogPop ref="diaLogPop" :option="option" @confirm='confirm' @cancel='cancel'></dialogPop> -->
		<dialogPop ref="diaLogPop" :show="showModal" :title="option.title" :content='option.html' @confirm='confirm'
			@cancel='cancel'>
		</dialogPop>

	</view>
</template>

<script setup lang="js">
import {
	onMounted,
	reactive,
	ref
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";
import dialogPop from '@/components/dialogPop.vue';

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '退款/售后',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 240
})

const tableList = ref([{
	id: 1,
	name: '全部',
},
{
	id: 2,
	name: '处理中',

},
{
	id: 3,
	name: '已结束',
}
])

const option = reactive({
	html: `确定要删除吗？`,
	title: '删除订单',
})
const showModal = ref(false)

// 弹窗取消时处理逻辑
const cancel = () => {
	showModal.value = false

}
// 弹窗删除提交
const confirm = () => {
	showModal.value = false

	if (handCode.value == 'delete') {
		utils
			.request(
				api.deleteRefund, {
				id: handId.value
			},
				"post"
			)
			.then((res) => {
				reloadData()
			});
	} else if (handCode.value == 'cancel') {
		utils
			.request(
				api.closeRefund, {
				id: handId.value
			},
				"post"
			)
			.then((res) => {
				reloadData()
			});
	}
}
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const handCode = ref('')
const handId = ref('')
const changeOrder = (code, id) => {
	if (code == 'delete') {
		option.title = '提示'
		option.html = '确定要删除吗？'
	} else if (code == 'cancel') {
		option.title = '撤销售后'
		option.html = '确定要撤回售后吗？'
	}
	showModal.value = true

	handCode.value = code
	handId.value = id
}

// 选项点击切换
const selectId = ref(0)
const selectName = ref('')
const iconUrl = ref('')
const selectBtn = async (idx, item) => {
	selectId.value = idx
	selectName.value = item.name
	// 请求接口
	reloadData()
}

const reloadData = () => {
	orderPage.value = 1
	orderList.value = []
	orderLoading.value = true
	getOrderListData()
}

const orderPage = ref(1)
const orderList = ref([])
const orderLoading = ref(true)
const getOrderListData = () => {
	if (!orderLoading.value) {
		return
	}
	uni.showLoading()
	orderLoading.value = false
	utils
		.request(
			api.getRefundList, {
			page: orderPage.value,
			pageSize: 10,
			searchStatus: selectName.value == '全部' ? '' : selectName.value
		},
			"get"
		)
		.then((res) => {
			orderPage.value++
			if (res.data.items.length > 0) {
				orderList.value = orderList.value.concat(res.data.items)
			}
			if (orderPage.value <= res.data.pageInfo.totalPage) {
				orderLoading.value = true
			}
			uni.hideLoading()
		});
}

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

onLoad(() => {
	getOrderListData()
})

onReachBottom(() => {
	getOrderListData()
})
</script>

<style lang="scss" scoped>
.tabBar {

	.item {
		padding: 0 20rpx;
		height: 72rpx;
		background: #f8f8f8;
	}

	.active {
		background: #dbf046;
	}
}

.right-icon {
	width: 20rpx;
	height: 34rpx;
}

.box {
	// height: 100%;
}

.listBox {
	width: 100%;
	padding: 0rpx 30rpx 30rpx;
	box-sizing: border-box;

	.list_model {
		border: 2rpx solid #F1F1F1;
		padding: 0 20rpx;

		.time {
			.status {
				color: #333333;
			}

			.status.ing {
				color: #1F18EE;
			}
		}

		.content {
			.top {
				display: flex;

				.imgs {
					width: 222rpx;
					height: 274rpx;
					flex-shrink: 0;
				}

				.avtor {
					width: 108rpx;
					height: 108rpx;
					background: #ffffff;
					border: 2rpx solid #dbf046;
					border-radius: 50%;

					.img {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
					}
				}

				.log_bg {
					border: 2rpx solid #DBF046;
					width: 108rpx;
					height: 108rpx;

					.logs {
						width: 92rpx;
						height: 92rpx;
						flex-shrink: 0;
					}
				}
			}

			.right_box {

				.money_model {
					padding: 20rpx;
					width: 408rpx;
					background: linear-gradient(to left, #FFFFFF, #FBFFDF);
				}

				.money_model_log {
					display: flex;
					justify-content: flex-end;

					.box {
						padding: 20rpx;
						background: linear-gradient(to left, #FFFFFF, #FBFFDF);
						width: 408rpx;

					}
				}
			}
		}

		.bottom {
			padding: 0 20rpx;
			height: 74rpx;
			background: linear-gradient(to left, #FFFFFF, #FFF3EC);

			.pdd_icon {
				width: 60rpx;
				height: 52rpx;
			}

			.outTime {
				display: flex;
				align-items: center;
			}

		}

		.refund {
			background: linear-gradient(to left, #FFFFFF, #F2F2FF);

		}

		.pdd {
			background: linear-gradient(to left, #FFFFFF, #DBF046);

		}

		.bottom_model {
			padding: 20rpx 0;
			position: relative;

			.btn_model {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.icons {
				width: 56rpx;
				height: 32rpx;
			}

			.btn {
				background-color: #F8F8F8;
				border-radius: 20rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #333;
				width: 136rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
			}

			.noPay {
				background-color: #333;
				color: #fff;
			}

			.pay {
				background-color: #dbf046;
				color: #333;
			}

		}
	}
}

.bubble {
	position: absolute;
	background: #fff;
	padding: 20rpx;
	border-radius: 10px;
	min-width: 100rpx;
	min-height: 40rpx;
	line-height: 40rpx;
	//   margin: 50px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	left: -40rpx;
	top: 100%;
	z-index: 10;
	text-align: center;
}

// .bubble::after {
//   content: '';
//   position: absolute;
//   top: 100%;
//   left: 50%;
//   margin-left: -10px;
//   border-width: 10px;
//   border-style: solid;
//   border-color: #f0f0f0 transparent transparent transparent;
// }

/* 修改重点在这里 ▼▼▼ */
.bubble::before {
	content: '';
	position: absolute;
	bottom: 100%;
	/* 定位到气泡顶部 */
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	/* 调整颜色方向 */
}

/* 可选 - 添加动画效果 */
.bubble {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>